<template>
  <view
    class="modules"
    :style="{
      width
    }"
  >
    <navigator class="module" url="/pages/news/index">
      <avatar bgColor="none" center size="100upx" :src="IMAGES.HOME_NEWS"></avatar>
      <text class="label">新 闻</text>
    </navigator>
    <navigator class="module" url="/pages/shop/index">
      <avatar bgColor="none" center size="100upx" :src="IMAGES.HOME_SHOP"></avatar>
      <text class="label">商 城</text>
    </navigator>
    <navigator class="module" url="/pages/video/index">
      <avatar bgColor="none" center size="100upx" :src="IMAGES.HOME_VIDEO"></avatar>
      <text class="label">直 播</text>
    </navigator>
    <navigator class="module" url="/pages/game/index">
      <avatar bgColor="none" center size="100upx" :src="IMAGES.HOME_GAME"></avatar>
      <text class="label">英雄乐</text>
    </navigator>
  </view>
</template>

<script>
import avatar from "@/lyui/ly-avatar/avatar";
import { IMAGES } from "@/config/resources";
export default {
  components: {
    avatar
  },
  data() {
    return {
      IMAGES: IMAGES
    };
  },
  props: {
    width: {
      type: String,
      default: "640rpx"
    }
  }
};
</script>

<style lang="scss">
.modules {
  /* #ifndef APP-PLUS */
  display: flex;
  /* #endif */
  justify-content: center;
  flex-direction: row;
}
.module {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.label {
  text-align: center;
  color: #999797;
  margin-left: -15upx;
  font-size: 24upx;
}
</style>
